<template>
	<div style="padding:0 37px 0 44px">
    <div class="breadcrumb-father">
      <div class="new-breadcrumb">
        
        <router-link  :to="{path:'/welcome'}">
          <img src="../../../assets/imgs/Home.png" alt="">
        </router-link>
        <!-- <a href="javascript:void(0)">
        </a> -->
          <span>{{$t('index.approval')}}</span>
        <span class="arrow">></span>
        <!-- <a href="javascript:void(0)">
        </a> -->
          <span>{{$t('mer.mchtApproval')}}</span>
      </div>
    </div>

		<div class="card-table">
			<div class="card-table-title">
        <svg aria-hidden="true" class="svg-icon svg-title-icon">
          <use xlink:href="#icon-shanghushenhe"></use>
        </svg>
				<span>{{$t('mer.PendingMerchantApproval')}}</span>
			</div>
				<div class="table-border">
			  	<el-table border :data="merAuditDatas" @cell-mouse-enter="showHandle" @cell-mouse-leave='hiddenHandle' height=500 v-loading="loading" :element-loading-text="$t('button.loading')" element-loading-background="rgba(255, 255, 255, 1)">
				    <el-table-column type="index" :label="$t('index.Number')" width="80"></el-table-column>
				    <el-table-column prop="name" :label="$t('newcash.merchantName')" class-name="title_name"></el-table-column>
				    <el-table-column prop="address" :label="$t('mer.MerchantAddress')"></el-table-column>
				    <el-table-column prop="distributorNumber" :label="$t('newcash.agentName')"></el-table-column>
				    <el-table-column prop="remarks" :label="$t('mer.ApprovalItem')" :formatter="mercState"></el-table-column>
				    <el-table-column fixed="right" class-name="handle-hidden-1 animate_td">
				    	<template slot-scope="scope">
				        	<!-- <el-button class="blue-btn mini-btn" @click="showMercDetails(scope.row.merchantId,scope.row.remarks,scope.row.name)">{{$t('button.Approval')}}</el-button> -->
                  <a class="svg-link-class" @click="showMercDetails(scope.row.merchantId,scope.row.remarks,scope.row.name)">
                    <svg aria-hidden="true" class="svg-icon svg-action-icon">
                      <use xlink:href="#icon-shenhe"></use>
                    </svg>
                  </a>
				     	</template>
				    </el-table-column>
			  	</el-table>
				</div>
		</div>
		<div class="pagination-container">
			<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page.sync="obj.page" :page-sizes="[15,20,30,50]" :page-size="obj.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="res.total"></el-pagination>
		</div>
	</div>
	
</template>

<script>
import {
  viceMerchant,
  MerchantByCheck,
  queryShopAll
} from "api/audit/merAudit/index";

export default {
  name: "merAudit",
  data() {
    return {
      merAuditDatas: [],
      res: [],
      obj: {
        page:1,
        pageSize:15,
      },
      headers: { "access-token": sessionStorage.getItem("access-token") },
      mercDataList: [],
      mercOldData: [],
      mercNewData: [],
      mercNewArr: [],
      diffData: [],
      num: 0,
      merAuditImgList: [],
      optionsI: JSON.parse(localStorage.getItem("queryIndustryObj")),
      // industryId: null,
      companyId: localStorage.getItem("companyId"),
      tableIndex: null,
      oldPage: null,
      loading: true,
    };
  },
  watch:{
    'obj.page':function(newVal,oldVal){
        this.oldPage = oldVal;
    },
  },
  created() {
    if(localStorage.getItem('obj')){
      this.obj = JSON.parse(localStorage.getItem('obj'));
    }

    this.queryShopAllFn(this.obj);

    $("#z_auditManage .el-menu a li:first").addClass('is-active');
  },
  methods: {
    showHandle(row, column, cell, event){
      for(let i = 0;i<this.merAuditDatas.length;i++){
        if(this.merAuditDatas[i].id === row.id){
          this.tableIndex = i;
          // console.log($(".el-table__fixed-right").find('.el-table__row')[i]);
          const table_row = $(".el-table__fixed-right").find('.el-table__row')[i];
          $(table_row).find('td:last').removeClass('handle-hidden-1');
          // $(".animate_td .cell").css("right","-120px");

          $(".el-table__fixed-right").addClass("fixed-column-1");
          // 判断项目数目是否导致滚动条出现
          if(this.merAuditDatas.length <= 15){
            $(".el-table__fixed-right").addClass("right-zero");
          }else{
              $(".el-table__fixed-right").removeClass("right-zero");
          }

          $(".el-table__fixed-right").css("z-index","22");
          var action_div = $(table_row).find('td:last').children("div");
          $(action_div).stop().animate({"right": "0"});

        }
      }

      // console.log($(cell).parent());
      // $(cell).parent().find('>td:last').removeClass('handle-hidden');
      // $(cell).parent().find('>td:last').removeClass('is-hidden')
      
    },
    hiddenHandle(row, column, cell, event){
      // $(cell).parent().find('>td:last').addClass('handle-hidden');
      const table_row = $(".el-table__fixed-right").find('.el-table__row')[this.tableIndex];
      $(".el-table__fixed-right").css("z-index","0");
      var action_div = $(table_row).find('td:last').children("div");
      $(action_div).stop().animate({"right": "-120px"});

    },
    mercState(row) {
      let remarks = row.remarks;
      if (remarks === "0") {
        return (remarks = this.$t("mer.Registration"));
      } else if (remarks === "1") {
        return (remarks = this.$t("mer.Amendment"));
      }
    },
    //查询商户审核列表接口方法
    queryShopAllFn(value,str) {

      const _that = this;

      _that.loading = true;

      if( str == 'CurrentChange' ){
        // 获取所有分页项数，循环去除选中样式，对点击前的项数添加选中样式
        let obj = $('.el-pager .number');
        for( let i = 0; i < obj.length; i++){
            if($(obj[i]).html() == this.oldPage) {
              $(obj[i]).addClass('active');
            } else {
              $(obj[i]).removeClass('active');
            }
        }
      }

      value.companyId = localStorage.getItem("companyId");
      queryShopAll(value).then(res => {
        this.merAuditDatas = res.value.rows;
        this.res = res.value;

        // 如果是分页触发，循环去除选中样式，对点击后的项数添加选中样式
        if( str == 'CurrentChange' ){
          let obj = $('.el-pager .number');
          for( let i = 0; i < obj.length; i++){
              if($(obj[i]).html() == this.obj.page) {
                $(obj[i]).addClass('active');
              } else {
                $(obj[i]).removeClass('active');
              }
          }
        }

        setTimeout(function (param) { 
          const td_last_child = $(".el-table__body-wrapper tr td:last-child");
          for(let i=0;i<td_last_child.length;i++){
            $(td_last_child[i]).removeClass('handle-hidden-1');
          }

          const title_name_arr = $(".el-table__body-wrapper .title_name .cell");
          for(let j = 0;j<title_name_arr.length;j++){
            $(title_name_arr[j]).attr('title',$(title_name_arr[j]).html());
          }

          _that.loading = false;

         },500)
      });
    },
    // 判断字符串长度的方法
    getStrL(str){
      let l = str.length; 
      let blen = 0; 
      for(let i=0; i<l; i++) { 
        if ((str.charCodeAt(i) & 0xff00) != 0) { 
          blen ++; 
        } 
        blen ++; 
      }
      return blen;
    },
    //点击审核按钮进入商户详情页
    showMercDetails(merchantId, remarks,name) {
      localStorage.setItem('obj',JSON.stringify(this.obj));
      this.$router.push({ path: "/merAuditDetails",query:{ merId:merchantId,remarks:remarks,name:name } });
    },
    //pageSize 改变时会触发
    handleSizeChange(val) {
      this.obj.pageSize = val;
      this.queryShopAllFn(this.obj);
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      this.obj.page = val;
      this.queryShopAllFn(this.obj,'CurrentChange');
    }
  }
};
</script>

<style lang="scss" scoped>
.el-table::before {
  height: 0;
}
.quarter {
  width: 40%;
  float: left;
  line-height: 40px;
}
.el-upload-list--picture .el-upload-list__item {
  width: 80px;
  float: left;
}
.el-upload-list--picture
  .el-upload-list__item.is-success
  .el-upload-list__item-name {
  display: none;
}

</style>